<template>
  <div class="search_set_container">
    <div class="search_set_content">
      <a-tabs default-active-key="1">
        <a-tab-pane key="1" tab="内容设置">
          <div class="module_content_set">
            <div class="set_title">文本</div>
            <div class="set_list">
              <div class="set_item">
                <div class="set_radio">
                  <a-input
                    v-model="text"
                    type="textarea"
                    placeholder="请输入文本内容"
                  />
                </div>
              </div>
            </div>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" tab="样式设置">
          <div class="module_content_set">
            <div class="set_title">内容设置</div>
            <div class="set_list">
              <!-- 字号大小 -->
              <div class="set_item">
                <div class="set_label">字号大小</div>
                <div class="set_data">{{ fontSize }}</div>
                <div class="set_radio">
                  <a-radio-group v-model="fontSize" button-style="solid">
                    <a-radio-button value="28px"> 小 </a-radio-button>
                    <a-radio-button value="32px"> 中 </a-radio-button>
                    <a-radio-button value="36px"> 大 </a-radio-button>
                  </a-radio-group>
                </div>
              </div>
              <!-- 字体对齐方式 -->
              <div class="set_item">
                <div class="set_label">对齐位置</div>
                <div class="set_radio">
                  <a-radio-group v-model="textAlign" button-style="solid">
                    <a-radio-button value="left"> 居左 </a-radio-button>
                    <a-radio-button value="center"> 居中 </a-radio-button>
                    <a-radio-button value="right"> 居右 </a-radio-button>
                  </a-radio-group>
                </div>
              </div>
              <!-- 文字颜色 -->
              <div class="set_item">
                <div class="set_label">文字颜色</div>
                <div class="set_radio"></div>
              </div>
              <!-- 背景颜色 -->
              <div class="set_item">
                <div class="set_label">背景颜色</div>
                <div class="set_radio"></div>
              </div>
              <!-- 特殊样式 -->
              <div class="set_item">
                <div class="set_label">特殊样式</div>
                <div class="set_radio">
                  <a-radio-group v-model="fontWeight" button-style="solid">
                    <a-radio-button :value="700"> 是 </a-radio-button>
                    <a-radio-button :value="500"> 否 </a-radio-button>
                  </a-radio-group>
                </div>
              </div>
            </div>
          </div>
          <div class="module_content_set">
            <div class="set_title">组件样式</div>
            <div class="set_list">
              <div class="set_item">
                <div class="set_label">上边距</div>
                <div class="set_data">{{ paddingTop }}</div>
                <div class="set_radio">
                  <a-radio-group v-model="paddingTop" button-style="solid">
                    <a-radio-button value="0px"> 小 </a-radio-button>
                    <a-radio-button value="15px"> 中 </a-radio-button>
                    <a-radio-button value="30px"> 大 </a-radio-button>
                  </a-radio-group>
                </div>
              </div>
              <div class="set_item">
                <div class="set_label">下边距</div>
                <div class="set_data">{{ paddingBottom }}</div>
                <div class="set_radio">
                  <a-radio-group v-model="paddingBottom" button-style="solid">
                    <a-radio-button value="0px"> 小 </a-radio-button>
                    <a-radio-button value="15px"> 中 </a-radio-button>
                    <a-radio-button value="30px"> 大 </a-radio-button>
                  </a-radio-group>
                </div>
              </div>
            </div>
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
  props: ["id", "contentSetting", "styleSetting"],
  data() {
    let data = {};
    this.initContentProps(data);
    this.initStyleProps(data);
    return {
      ...data,
    };
  },
  watch: {
    // 相同组件时切换对应组件的数据
    activeComponent(newComponent, oldVal) {
      if (oldVal && newComponent && oldVal !== newComponent) {
        this.initContentProps(this);
        this.initStyleProps(this);
      }
    },
    text(newText) {
      console.log(newText);
      this.setComponentProps({
        id: this.id,
        node: "contentSetting",
        name: "text",
        value: newText,
      });
    },
    fontSize(newFontSize) {
      this.setComponentProps({
        id: this.id,
        node: "styleSetting",
        name: "fontSize",
        value: newFontSize,
      });
    },
    paddingTop(newTop) {
      this.setComponentProps({
        id: this.id,
        node: "styleSetting",
        name: "paddingTop",
        value: newTop,
      });
    },
    paddingBottom(newBottom) {
      this.setComponentProps({
        id: this.id,
        node: "styleSetting",
        name: "paddingBottom",
        value: newBottom,
      });
    },
    textAlign(newTextAlign) {
      this.setComponentProps({
        id: this.id,
        node: "styleSetting",
        name: "textAlign",
        value: newTextAlign,
      });
    },
    fontWeight(newFontWeight) {
      this.setComponentProps({
        id: this.id,
        node: "styleSetting",
        name: "fontWeight",
        value: newFontWeight,
      });
    },
  },
  methods: {
    initStyleProps(data) {
      if (this.styleSetting) {
        data.fontSize = this.styleSetting.fontSize || "28px";
        data.paddingTop = this.styleSetting.paddingTop || "0px";
        data.paddingBottom = this.styleSetting.paddingBottom || "0px";
        data.textAlign = this.styleSetting.textAlign || "left";
        data.fontWeight = this.styleSetting.fontWeight || 500;
      } else {
        data.fontSize = "28px";
        data.paddingTop = "0px";
        data.paddingBottom = "0px";
        data.textAlign = "left";
        data.fontWeight = 500;
      }
    },
    initContentProps(data) {
      if (this.contentSetting) {
        data.text = this.contentSetting.text;
      } else {
        data.text = "";
      }
    },
    ...mapMutations(["setComponentProps"]),
  },
  computed: {
    ...mapState({
      activeComponent: (state) => state.activeComponent,
    }),
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
</style>